<template>
    <div class='status-bar'>
        <div class="bar">
            <div class="left">
                <slot name="left">
                    <div class="go-back" @click="goBack">
                        <i class="iconfont icon-jiantou"></i>
                        <span class="text">返回</span>
                    </div>
                </slot>
            </div>
            <div class="center">
                <slot name="center">
                    <div class="page-title">{{pageTitle}}</div>
                </slot>
            </div>
            <div class="right">
                <slot name="right">
                    <switch-theme></switch-theme>
                </slot>
            </div>
        </div>
    </div>
</template>

<script>
import SwitchTheme from "@/components/SwitchTheme/index"
export default {
    name: '',
    data() { 
        return {

        }
    },
    computed:{
        pageTitle(){
            return this.$route.meta.title || this.$store.getters.pageTitle
        }
    },
    props: {

    },
    components:{
        SwitchTheme
    },
    mounted() {

    },
    methods:{
        goBack(){
            this.$router.go(-1);
        }
    },
}
</script>

<style lang='scss' scoped>
.status-bar{
    height:50px;
    position: relative;
    z-index: 10;
    .bar{
        position:fixed;
        z-index: 10;
        width:100%;
        height:50px;
        left:0;
        top:0;
        display:flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding:0 0.5rem;
    }
    .go-back{
        display:flex;
        align-items: center;
        line-height: 1;
        .iconfont{
            display:block;
            font-size:0.4rem;
            font-weight: normal;
        }
        .text{
            display:block;
            font-size:0.34rem;
            margin-left:0.15rem;
        }
    }
    .page-title{
        font-size:0.34rem;
        line-height: 1;
    }
    .center{
        position:absolute;
        left:50%;
        transform: translateX(-50%);
    }
}
</style>